<style type="text/css">
    .ui-tooltip-wrap{ position:absolute; z-index:1000; border:1px solid #dbdbdb; border-right:0 none; border-bottom:0 none; border-radius:3px; background:#fff;
        -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.3);
        -moz-box-shadow:1px 1px 1px rgba(0,0,0,0.3);
        -o-box-shadow:1px 1px 1px rgba(0,0,0,0.3);
        -ms-box-shadow:1px 1px 1px rgba(0,0,0,0.3);
        box-shadow:1px 1px 1px rgba(0,0,0,0.3);
    }
    .ui-tooltip-wrap:before,.ui-tooltip-wrap:after{ position:absolute; content:"";}
    .ui-tooltip-wrap.top:before{ border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #dbdbdb;}
    .ui-tooltip-wrap.top:after{ border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #fff;}
    .ui-tooltip-wrap.top.left:before{ top:-7px; left:7px;}
    .ui-tooltip-wrap.top.left:after{ top:-6px; left:8px;}
    .ui-tooltip-wrap.top.right:before{ top:-7px; right:7px;}
    .ui-tooltip-wrap.top.right:after{ top:-6px; right:8px;}

    .ui-tooltip-wrap.bottom:before{ border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #dbdbdb;}
    .ui-tooltip-wrap.bottom:after{ border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #fff;}
    .ui-tooltip-wrap.bottom.left:before{ bottom:-7px; left:7px;}
    .ui-tooltip-wrap.bottom.left:after{ bottom:-6px; left:8px;}
    .ui-tooltip-wrap.bottom.right:before{ bottom:-7px; right:7px;}
    .ui-tooltip-wrap.bottom.right:after{ bottom:-6px; right:8px;}

    .lt-ie10 .ui-tooltip-wrap{ border:1px solid #dbdbdb; border-bottom:3px solid #dbdbdb}
</style>
<div style="display:none" id="ui-tooltip-wrap" class="ui-tooltip-wrap">
    <div class="ui-tooltip-con">

    </div>
</div>
<script id="eee" type="text/template">
    <div style="width:300px; height:300px; line-height:300px; text-align:center">demo</div>
</script>
<script type="text/javascript" src="http://www.12301.cc/tpl/ui/tooltip/pft.ui.tooltip.js"></script>
<script type="text/javascript">
//    var tooltip = new PFT.UI.Tooltip();
//    var triggerBtn = $("#searchBtn");
//    triggerBtn.hover(function(){
//        tooltip.tip($("#searchBtn"),$("#eee").html(),{
//            offsetX : 5,
//            offsetY : 10,
//            onShow : function(){
//                console.log("onShow");
//            },
//            onHide : function(){
//                console.log("onHide");
//            }
//        })
//    })
</script>